<template>
  <!-- <el-row type="flex" align="middle" justify="space-between" class="template-edit-header">
    <el-col :span="6" class="header-item">
      <router-link to="/">Home</router-link>
      <div class="header-item" style="margin-left: 12px">
        <el-avatar :size="32" fit="cover" shape="circle" src="" />
        <span class="works-title">未命名作品</span>
      </div>
    </el-col>
    <el-col :span="10" :pull="1" class="header-item">
      <el-button type="primary" round>预览和设置</el-button>
      <el-button type="primary" round>保存</el-button>
      <el-button type="primary" round>发布</el-button>
      <el-button type="primary" round>登录</el-button>
    </el-col>
  </el-row>
  <el-container direction="horizontal">
    <el-header class="template-edit-left">
      <template v-if="componentlist?.length > 0">
        <CustomLabelComponentList
          :component-list="_componentStore.defaultLabelComponentList"
          @add-component="onAddComponent"
        />
      </template>
    </el-header>
    <el-main class="template-edit-main" @click.capture="activeId = ''">
      <h3>画布区域</h3>
      <el-card
        shadow="always"
        style="height: 100%"
        :body-style="{ height: '100%', minWidth: '375px', padding: 0, boxSizing: 'border-box' }"
      >
        <template v-if="componentlist?.length > 0">
          <CustomComponent
            :active="activeId"
            :componentlist="componentlist"
            @on-select="onSelect"
          />
        </template>
      </el-card>
    </el-main>
    <el-footer class="template-edit-right">
      <template v-if="currentElement">
        <CurrentCustomComponentInfo :component-info="currentElement" />
      </template>
    </el-footer>
  </el-container> -->
  <a-row type="flex" align="middle" justify="space-between" class="template-edit-header">
    <a-col :span="6" class="header-item">
      <router-link to="/">Home</router-link>
      <div class="header-item">
        <a-avatar :size="32" shape="circle" src="" :load-error="() => true" />
        <span class="works-title">未命名作品</span>
      </div>
    </a-col>
    <a-col :span="10" :pull="1" class="header-item">
      <a-button type="primary" shape="round">预览和设置</a-button>
      <a-button type="primary" shape="round">保存</a-button>
      <a-button type="primary" shape="round">发布</a-button>
      <a-button type="primary" shape="round">登录</a-button>
    </a-col>
  </a-row>
  <a-layout style="flex-direction: row">
    <a-layout-header class="template-edit-left">
      <template v-if="componentlist?.length > 0">
        <CustomLabelComponentList
          :component-list="_componentStore.defaultLabelComponentList"
          @add-component="onAddComponent"
        />
      </template>
    </a-layout-header>
    <a-layout-content class="template-edit-main" @click.capture="hideFooter">
      <h3 style="height: 30px; line-height: 40px">画布区域</h3>
      <a-card
        style="height: 100%"
        :body-style="{ height: '100%', minWidth: '375px', padding: 0, boxSizing: 'border-box' }"
      >
        <template v-if="componentlist?.length > 0">
          <CustomComponent
            :active="activeId"
            :componentlist="componentlist"
            @on-select="onSelect"
          />
        </template>
      </a-card>
    </a-layout-content>
    <a-layout-footer class="template-edit-right">
      <template v-if="currentElement">
        <CurrentCustomComponentInfo :component-info="currentElement" @update-view="onUpdateView" />
      </template>
    </a-layout-footer>
  </a-layout>
</template>

<script setup lang="ts">
import { componentStore } from '../../store/componentData';
import CustomLabelComponentList from './component/CustomLabelComponentList.vue';
import CustomComponent from './component/CustomComponent.vue';
import CurrentCustomComponentInfo from './component/CurrentCustomComponentInfo.vue';
// import CurrentCustomComponentInfo from './component/CurrentCustomComponentInfo';

import type { ComponentDataType } from '../../store/storeTypes';

const _componentStore = componentStore();
const componentlist = computed(() => _componentStore.components);
const currentElement = computed(() => _componentStore.getCurrentComponentInfo);

const activeId = ref('');
function onAddComponent(component: ComponentDataType) {
  _componentStore.addComponentData(component);
}
function hideFooter() {
  activeId.value = '';
  _componentStore.currentComponent = '';
}
function onSelect(id: string) {
  // console.log(id);
  activeId.value = id;
  _componentStore.currentComponent = id;
}
function onUpdateView(data: { key: string; value: string }) {
  _componentStore.updateComponentData(data);
}
</script>

<style scoped>
.template-edit-header {
  height: 50px;
  background-color: rgba(223, 56, 245, 0.5);
}
.header-item {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.works-title {
  white-space: nowrap;
  margin-left: 12px;
}
.template-edit-left,
.template-edit-right {
  height: calc(100vh - 50px);
}
.template-edit-left {
  width: 140px;
  padding: 0 12px;
  background-color: lightyellow;
}
.template-edit-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 0;
  padding-bottom: 30px;
  background-color: #eee;
  text-align: left;
}
.template-edit-right {
  width: 340px;
  padding: 0 12px;
  background-color: rgba(255, 105, 180, 0.3);
}
</style>
